<template>
  <div class="dashboard-box">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-space direction="vertical">
          <el-card class="box-card" style="margin-bottom: 20px;">
            <div class="card-content">
              <div>
                <img :src="require('@/assets/imgs/gonge.svg')" style="width:50px" />
              </div>
              <div class="card-title">
                <div>订单数量</div>
                <count :endVal='+goodsCount'></count>
              </div>
            </div>
          </el-card>
          <el-card class="box-card">
            <div class="card-content">
              <div>
                <img :src="require('@/assets/imgs/xiaoxi.svg')" style="width:50px" />
              </div>
              <div class="card-title">
                <div>未发货</div>
                <count :endVal='+waitStockCount'></count>
              </div>
            </div>
          </el-card>
        </el-space>
      </el-col>
      <el-col :span="16">
        <div id="order-sum" style="width: 100%; height: 350px;"></div>
      </el-col>
    </el-row>
    <!-- 主体内容 -->
    <el-row class="bottom-data">
      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" style="margin-top:20px">
        <div id="broken" class="colBox"></div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" style="margin-top:20px">
        <div id="pie1" class="colBox"></div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" style="margin-top:20px">
        <div id="pie2" class="colBox"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { post } from "@/utils/http"
import count from "@/components/vue-count-to/src/vue-countTo.vue";
export default {
  components: { count },
  created() {
    this.getEchartData()
  },
  data() {
    return {
      goodsCount: '',  //商品数量
      waitStockCount: "" //未发货
    }
  },
  methods: {
    initCharts(res) {
      //初始化7日订单
      var myChart = echarts.init(document.getElementById('order-sum'));// 基于准备好的dom，初始化echarts实例
      myChart.setOption({
        title: {
          text: '7日订单',
          // subtext: '订单数',
          left: 'left'
        },
        legend: {
          data: ["订单数"],
          orient: 'vertical',
          left: 'right'
        },
        xAxis: {
          type: 'category',
          data: res.data.daysOrder[0]
        },
        yAxis: {
          name: "订单数",
          type: 'value'
        },
        series: [
          {
            name: "订单数",
            data: res.data.daysOrder[1],
            type: 'bar'
            // barWidth: 35
          }
        ],
        color: ["#00b5ff"],  //柱形颜色
      });
      //7日订单金额
      var myChart1 = echarts.init(document.getElementById('broken'));// 基于准备好的dom，初始化echarts实例
      myChart1.setOption({
        title: {
          text: '7日成交额',
        },
        legend: {
          data: ["订单数"],
          orient: 'vertical',
          left: 'right'
        },
        xAxis: {
          type: 'category',
          data: res.data.daysSum[0]
        },
        yAxis: {
          name: "订单数",
          type: 'value'
        },
        series: [
          {
            name: "订单数",
            data: res.data.daysSum[1],
            type: 'line'
          }
        ]
      });


      //订单地区分布
      var myChart2 = echarts.init(document.getElementById('pie1'));// 基于准备好的dom，初始化echarts实例
      myChart2.setOption({
        title: {
          text: '订单地区分布',
          // subtext: 'Fake Data',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          data: ["地区分布"],
          left: 'right'
        },
        series: [{
          name: '地区分布',
          type: 'pie',
          radius: '55%',
          data: res.data.area,
          center: ["50%", "50%"],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      });

      //订单渠道分布
      var myChart3 = echarts.init(document.getElementById('pie2'));// 基于准备好的dom，初始化echarts实例
      myChart3.setOption({
        title: {
          text: '订单渠道分布',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [{
          name: '订单渠道分布',
          type: 'pie',
          radius: '55%',
          data: res.data.channel,
          center: ["50%", "50%"],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      });

      window.onresize = function () {
        myChart.resize()
        myChart1.resize()
        myChart2.resize()
        myChart3.resize()
      }
    },
    //获取可视化的数据
    getEchartData() {
      post({
        _gp: "admin.dashboard",
        _mt: "integral"
      })
        .then(res => {
          this.goodsCount = res.data.goodsCount
          this.waitStockCount = res.data.waitStockCount
          this.initCharts(res)
        })
    }
  }
}
</script>

<style lang="less" scoped>
@media screen and (max-width: 992px) {
  .card-title {
    display: none;
  }
}
.dashboard-box {
  .el-row {
    margin: 20px 0;
    .el-col {
      border-radius: 4px;
      text-align: center;
      .el-card {
        width: 80%;
      }
    }
  }
  .box-card {
    margin-top: 20px;
    .card-content {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .card-title {
        width: 120px;
        div {
          font-size: 15px;
          font-weight: 700;
          color: #666;
          text-align: center;
        }
      }
    }
  }
  .bottom-data {
    .el-col {
      text-align: center;
    }
  }
}
.colBox {
  width: auto;
  height: 400px;
}
</style>
